<template>
<div id="activity">
    <Header ></Header>
        <div class="top">
            <img src="https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/2550/新闻中心_02-1920x0-c.jpg">
            <div id="title">
                <h1 style="font-size: 7vw" >影展活动</h1>
                <h5>首页 / 影展活动</h5>
            </div>
        </div>
    <div class="content">
        <div class="item" v-for="(item,index) in article" :key="index">
            <router-link :to="{name:'Article',query:{title:item.name,context:item.details,img:item.figure,id:item.id,time:item.beginTime}}">
            <img :src="item.figure">
            <h4 class="item-title">
                {{item.name}}
            </h4>
            <h5 class="other">
                <i class="el-icon-location-outline"></i>
                {{item.region}}
                <br/>
                <i class="el-icon-time"></i>
                {{item.beginTime}}
            </h5>
            </router-link>
        </div>
    </div>

    <Footer ></Footer>
</div>
</template>

<script>
    import Footer from "../components/Footer";
    import Header from "../components/Header";
    import {getArticleApi, getProjectApi} from "../api";
    import {getLocalTime} from "../utils/dateUtil"
    export default {
        name: "Activity.vue",
        components:{
            Footer,Header
        },
        data(){
            return{
                article:[]
            }
        },
        methods:{
            getProject(){
                getProjectApi({
                    page:1,
                    pageSize:100
                }).then(res => {
                    this.article = res.data.list
                    for(let i = 0;i < this.article.length;i++){
                        this.article[i].beginTime =   getLocalTime(this.article[i].beginTime)
                    }
                })
            }
        },
        mounted() {
            this. getProject()
        }
    }
</script>

<style scoped>
    .top{
        position: relative;
    }
    #title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: white;
    }
    .content{
        width: 100%;
        min-height: 100vh;
    }
    .item{
        position: relative;
        margin-left: 2%;
        margin-top: 2vh;
        float: left;
        width: 22%;
        background: white;
        height: 60vh;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        transition: 1s;
        border-radius: 5px;
    }
    .item img{
        width: 18vw;
        min-height: 70%;
        margin-top: 2vh;
        border: 1px solid white;
    }
    .item:hover{
        background: black;
        color: white;
    }
    .other {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

</style>
